<template>
  <div class="Addtrail">
    <h1 style="margin: 1%">供应商跟进</h1>
    <div class="Prompt" v-show="state3">
      <span class="spanLeft">请填写标题</span>
      <span
        class="iconfont icon-closel spanRight"
        @click="state = !state"
      ></span>
    </div>
    <div
      class="Opacity"
      v-show="state1"
      @click="
        state1 = !state1;
        state2 = !state2;
      "
    ></div>
    <div class="Returns">
      <hr />
      <el-button class="iconfont icon-fanhui" @click="goTrail">返回</el-button>
    </div>
    <div class="inputcontent">
      <div class="inputdiv">
        <h4>类型</h4>
        <el-select v-model="addData" clearable placeholder="电话">
          <el-option label="电话" value="beijing"> </el-option>
          <el-option label="邮件" value="beijing"> </el-option>
          <el-option label="信息" value="beijing"> </el-option>
          <el-option label="拜访" value="beijing"> </el-option>
        </el-select>
      </div>
      <div class="inputdiv">
        <h4>状态</h4>
        <el-select v-model="addData" clearable placeholder="新跟进">
          <el-option label="新跟进" value="beijing"> </el-option>
          <el-option label="进行中" value="beijing"> </el-option>
          <el-option label="已完成" value="beijing"> </el-option>
          <el-option label="已取消" value="beijing"> </el-option>
        </el-select>
      </div>

      <div class="inputdiv">
        <h4>标题</h4>
        <el-input> </el-input>
      </div>
      <div class="inputdiv icons">
        <h4>供应商</h4>
        <el-input></el-input>
        <span
          class="iconfont icon-sousuo"
          @click="
            state1 = !state1;
            state2 = !state2;
          "
        >
          查找
        </span>
      </div>
      <div class="inputdiv">
        <h4>跟进日期</h4>
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
          style="width: 100%"
        >
        </el-date-picker>
      </div>
      <div class="inputdiv">
        <h4>下次跟进</h4>
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
          style="width: 100%"
        >
        </el-date-picker>
      </div>
    </div>

    <div class="trailPopout" v-show="state2">
      <span class="iconfont icon-untitled96 find" @click="close"></span>
      <div class="trailPopout1">
        <div class="Popoutcontent">
          <hr />
          <div class="divHeader">
            <span>查找供应商</span>
            <el-row class="Menu clear">
              <el-button
                style="color: #444444; background-color: #f4f4f4"
                icon="el-icon-search"
                class="btnright"
              ></el-button>
              <el-input placeholder="查找....."></el-input>
            </el-row>
          </div>
          <el-table
            style="width: 100%"
            :header-cell-style="{ 'background-color': '#f7f7f7' }"
          >
            <el-table-column prop="address" label="类型" width="50">
            </el-table-column>
            <el-table-column prop="address" label="供应商名称" width="400">
            </el-table-column>
            <el-table-column prop="address" label="联系人"> </el-table-column>
            <el-table-column prop="address" label="负责人"> </el-table-column>
            <el-table-column prop="address" label="状态"> </el-table-column>
            <el-table-column prop="address" label="操作" width="200">
            </el-table-column>
          </el-table>
          <div class="pageStyle">
            <ul class="ulLeft">
              <li>共条|</li>
              <li>每页条|</li>
              <li>共页</li>
            </ul>
            <ul class="ulRight">
              <el-button
                class="iconfont icon-zhishouye"
                @click="homePage"
                title="至首页"
              ></el-button>
              <el-button
                class="iconfont icon-triangle-left"
                @click="lastPage"
                title="至尾页"
              ></el-button>
              <div class="pages"><el-button>1</el-button></div>
              <el-button
                class="iconfont icon-triangle-right"
                @click="prevPage"
                title="上一页"
              ></el-button>
              <el-button
                class="iconfont icon-zhiweiye"
                @click="nextPage"
                title="下一页"
              ></el-button>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <div class="rtf">
      <div id="toolbar-container"></div>
      <div id="editor-container"></div>
    </div>

    <div class="soleFn">
      <el-button
        style="background-color: #208adb; color: #fff"
        @click="saveTrail"
        >保存</el-button
      >
      <el-button @click="cancelTrail">取消</el-button>
    </div>
  </div>
</template>

<script>
import "@wangeditor/editor/dist/css/style.css";
import {
  createEditor,
  createToolbar,
  IEditorConfig,
  IDomEditor,
} from "@wangeditor/editor";
export default {
  data() {
    return {
      //遮盖层状态
      state1: false,
      //查找弹框显示状态
      state2: false,
      //提示开关
      state3: false,
      addData: [],

      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      value1: "",
      value2: "",
    };
  },
  mounted() {
    //富文本方法调用
    this.editor();
  },
  methods: {
    //至首页
    homePage() {},
    //至尾页
    lastPage() {},
    //上一页
    prevPage() {},
    //下一页
    nextPage() {},
    //返回
    goTrail() {
      this.$router.push("/trail");
    },
    //  //保存判断input是否为空弹出提示/发起请求
    saveTrail() {},
    //取消清空input并返回
    cancelTrail() {
      this.$router.push("/trail");
    },
    //关闭查找
    close() {
      this.state2 = !this.state2;
      this.state1 = !this.state1;
    },
    //富文本方法
    editor() {
      //【注意】下面使用的 typescript 语法。如用 javascript 语法，把类型去掉即可。

      const editorConfig = {};
      editorConfig.placeholder = "请输入内容";
      editorConfig.onChange = (editor) => {
        // 当编辑器选区、内容变化时，即触发
        // console.log("content", editor.children);
        // console.log("html", editor.getHtml());
      };

      // 创建编辑器
      const editor = createEditor({
        selector: "#editor-container",
        config: editorConfig,
        mode: "default", // 或 'simple' 参考下文
      });
      // 创建工具栏
      const toolbar = createToolbar({
        editor,
        selector: "#toolbar-container",
        mode: "default", // 或 'simple' 参考下文
      });
    },
  },
};
</script>

<style scoped lang="less">
.inputcontent {
  width: 100%;
  // height: 300px;
  border: 1px solid black;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;

  .el-select {
    height: 80px;
    width: 100%;
  }
  .inputdiv {
    height: 80px;
    width: 48%;
    border: 1px solid red;
  }
}
//关闭
.find {
  cursor: pointer;
}
//查找
.icons {
  position: relative;
  span {
    cursor: pointer;
    color: #fff;
    background-color: green;
    position: absolute;
    top: 32%;
    right: 1%;
    height: 30px;
    width: 60px;
    line-height: 30px;
    border-radius: 5px;
  }
}
//最大的div
.Addtrail {
  width: 97%;
  // height: 1200px;
  margin: 0 auto;
  // border: 1px solid red;
  //返回
  .Returns {
    margin-bottom: 2px;
    width: 100%;
    // border-top: 1px solid red;
    height: 50px;
    line-height: 50px;
    .el-button {
      padding: 10px;
      background-color: #6c7b8b;
      color: #fff;
      font-weight: bold;
      margin-left: 1%;
    }
    hr {
      width: 100%;
      margin: 0 auto;
      border: 2px solid #6c7b8b;
    }
  }

  //最外层的弹框div
  .trailPopout {
    border-radius: 5px;
    z-index: 3;
    width: 1000px;
    height: 300px;
    position: absolute;
    background-color: #f9f9f9;
    overflow-y: scroll;
    left: 50%;
    transform: translate(-50%);
    top: 1%;
    //第二层的弹框div
    .trailPopout1 {
      width: 950px;
      height: 400px;
      background-color: #ecf0f5;
      margin: 25px auto;
      overflow: hidden;
      //分割线
      hr {
        width: 100%;
        border: 1px solid #6c7b8b;
        background-color: #6c7b8b;
      }
      //第三层的弹框div
      .Popoutcontent {
        width: 900px;
        background-color: #fff;
        margin: 0 auto;
        margin-top: 30px;
        //头部功能键
        .divHeader {
          width: 100%;
          height: 40px;
          span {
            font-size: 25px;
            float: left;
            line-height: 50px;
            margin-left: 20px;
          }
          //头部input和搜索
          .Menu {
            .el-button {
              float: right;
              padding: 12px;
              margin: 4px 0px;
              margin-right: 20px;
            }
            .el-input {
              width: 200px;
              float: right;
              margin: 4px 0px;
            }
          }
        }
      }
    }
  }
  //页码div
  .pageStyle {
    padding: 0 10px;
    height: 50px;
    background-color: #fafafa;
    .pages {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 50px;
      padding: 0px 10px;
    }
    .ulLeft {
      float: left;
      li {
        line-height: 50px;
        float: left;
        list-style: none;
      }
    }
    .ulRight {
      float: right;
      line-height: 50px;
      text-align: center;
      .el-button {
        font-size: 12px;
        padding: 5px;
      }
    }
  }
}

//遮盖层
.Opacity {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: black;
  opacity: 0.6;
  z-index: 2;
}
//富文本
.rtf {
  width: 98%;
  margin: 0 auto;
  margin-top: 1%;
  #toolbar-container {
    width: 100%;
    border: 1px solid #cccccc;
  }
  #editor-container {
    width: 100%;
    height: 500px;
    border: 1px solid #cccccc;
  }
}
//取消保存
.soleFn {
  margin: 0 auto;
  margin: 3% 0px;
  width: 100%;
  height: 4%;
  border: 1px #f4f4f4 solid;
  line-height: 80px;
  padding-left: 1%;
  box-sizing: border-box;
}

//最外层的弹框div
.trailPopout {
  border-radius: 5px;
  z-index: 3;
  width: 1000px;
  height: 300px;
  position: absolute;
  background-color: #f9f9f9;
  overflow-y: scroll;
  left: 50%;
  transform: translate(-50%);
  top: 1%;
  //第二层的弹框div
  .trailPopout1 {
    width: 950px;
    height: 400px;
    background-color: #ecf0f5;
    margin: 25px auto;
    overflow: hidden;
    //分割线
    hr {
      width: 100%;
      border: 1px solid #6c7b8b;
      background-color: #6c7b8b;
    }
    //第三层的弹框div
    .Popoutcontent {
      width: 900px;
      background-color: #fff;
      margin: 0 auto;
      margin-top: 30px;
      //头部功能键
      .divHeader {
        width: 100%;
        height: 40px;
        span {
          font-size: 25px;
          float: left;
          line-height: 50px;
          margin-left: 20px;
        }
        //头部input和搜索
        .Menu {
          .el-button {
            float: right;
            padding: 12px;
            margin: 4px 0px;
            margin-right: 20px;
          }
          .el-input {
            width: 200px;
            float: right;
            margin: 4px 0px;
          }
        }
      }
    }
  }
}
//提示
.Prompt {
  width: 98%;
  margin: 0 auto;
  background-color: #dd4b39;
  color: #fff;
  height: 70px;
  margin-bottom: 1%;
  line-height: 70px;
  .spanLeft {
    float: left;
    margin-left: 1%;
  }
  .spanRight {
    float: right;
    margin-right: 1%;
    color: #b13c2e;
  }
}
</style>